<template>
    <div>
        <h1>Dom工具</h1>
        <div>常用的操作Dom工具</div>

        <h3>useTouch-点击和触摸管理</h3>
        <div>对按下、移动、抬起手机端和电脑端进行统一管理</div>
        <br />
        <div>Vue3使用工具实现拖动悬浮框进行移动跟随：</div>
        <dCode :code="conf.str" />
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const conf = reactive({
    str: `    <div 
        style=\"z-index: 999;position: fixed;width: 300px;height: 300px;background-color: #999;\" 
        :style=\"{ left: \`\${conf.pos.left}px\`, top: \`\${conf.pos.top}px\` }\" 
        @mousedown=\"conf.pos.onmousedown\">
    </div>
    
    const conf = reactive({
        pos: {
            touch: null as any,
            left: document.body.offsetWidth - 200,
            top: 275,
            init: () => {
                conf.pos.left = document.body.offsetWidth - 200
                conf.pos.top = 100
            },
            onmousedown: (e: any) => {
                if (!conf.pos.touch) {
                    conf.pos.touch = DomUtil.useTouch()
                }
                const _pos = conf.pos
                const t = conf.pos.touch
                t.start(e)

                const startY = _pos.top
                const startX = _pos.left
                const onmousemove = (e1: any) => {
                    t.move(e1)
                    _pos.top = startY + t.conf.deltaY
                    _pos.left = startX + t.conf.deltaX
                }
                const onmouseup = () => {
                    t.reset()
                    document.body.removeEventListener('mousemove', onmousemove)
                    document.body.removeEventListener('mouseup', onmouseup)
                }

                document.body.addEventListener('mousemove', onmousemove)
                document.body.addEventListener('mouseup', onmouseup)
            }
        }
    })`
})
</script>
<style lang="less" scoped></style>
